<template>
  <el-dialog v-model="visible" title="属性配置" width="22%" :modal="true" :close-on-click-modal="false">
    <el-scrollbar height="500px">
      <el-form ref="editFormRef" :model="propForm" :rules="propRules" label-width="100px" :disabled="editFlag == 0">
        <el-form-item label="属性名称" prop="name">
          <el-input v-model="propForm.name" placeholder="请输入名称" maxlength="25"/>
        </el-form-item>
        <el-form-item label="属性编码" prop="code">
          <span>{{ propForm.code }}</span>
        </el-form-item>
        <el-form-item label="数据类型" prop="dataType">
          <dict-tag :options="prop_data_type" :value="propForm.dataType"/>
        </el-form-item>
        <el-form-item label="展示类型" prop="viewType">
          <el-select v-model="propForm.viewType" @change="handleViewTypeChange">
            <el-option v-for="dict in viewTypeOptions" :key="dict.value" :label="dict.label" :value="dict.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="数据来源" prop="srcType">
          <el-select v-model="propForm.srcType" @change="handleSrcTypeChange">
            <el-option v-for="dict in srcTypeOptions" :key="dict.value" :label="dict.label" :value="dict.value"/>
          </el-select>
        </el-form-item>
        <el-form-item v-if="propForm.srcType === '2'" label="选值列表" prop="selectData">
          <el-button :disabled="false" type="text" @click="handleSelectData">{{ configText }}</el-button>
        </el-form-item>
        <el-form-item v-if="propForm.srcType === '3'" label="引用字典" prop="linkCode">
          <el-select v-model="propForm.linkCode">
            <el-option v-for="dict in dictTypeList" :key="dict.code" :label="dict.name" :value="dict.code"/>
          </el-select>
        </el-form-item>
        <el-form-item v-if="propForm.srcType === '4'" label="引用模型" prop="linkCode">
          <el-select v-model="propForm.linkCode" @change="handleLinkCodeChange">
            <el-option v-for="model in simpleModelList" :key="model.code" :label="model.name" :value="model.code"/>
          </el-select>
        </el-form-item>
        <el-form-item v-if="propForm.srcType === '4'" label="携带属性" prop="linkData">
          <el-button :disabled="false" type="text">{{ configText }}</el-button>
        </el-form-item>
        <el-form-item label="是否必填" prop="notNvl">
          <el-switch v-model="propForm.ext.notNvl" :active-value="SwitchEnum.OPEN" :inactive-value="SwitchEnum.CLOSE" />
        </el-form-item>
        <el-form-item label="排序号" prop="colNum">
          <el-input-number v-model="propForm.colNum" :min="10" :max="900" />
        </el-form-item>
        <el-form-item label="列表显示" prop="viewSw">
          <el-switch v-model="propForm.viewSw" :active-value="SwitchEnum.OPEN" :inactive-value="SwitchEnum.CLOSE" />
        </el-form-item>
        <el-form-item label="快捷搜索" prop="quickSw">
          <el-switch v-model="propForm.quickSw" :active-value="SwitchEnum.OPEN" :inactive-value="SwitchEnum.CLOSE" @change="handleQuickSwChange" />
        </el-form-item>
        <el-form-item label="高级搜索" prop="advanceSw">
          <el-switch v-model="propForm.advanceSw" :active-value="SwitchEnum.OPEN" :inactive-value="SwitchEnum.CLOSE" />
        </el-form-item>
        <el-form-item v-if="propForm.dataType === 'A'" label="最大长度" prop="maxLen">
          <el-input-number v-model="propForm.ext.maxLen" :min="0" :max="300" />
        </el-form-item>
        <el-form-item v-if="propForm.dataType === 'A'" label="最小长度" prop="minLen">
          <el-input-number v-model="propForm.ext.minLen" :min="0" :max="300" />
        </el-form-item>
        <el-form-item v-if="propForm.dataType === 'B'" label="小数位数" prop="decLen">
          <el-input-number v-model="propForm.ext.decLen" :min="0" :max="300" />
        </el-form-item>
        <el-form-item v-if="propForm.dataType === 'B'" label="最大值" prop="maxNum">
          <el-input-number v-model="propForm.ext.maxNum" :min="0" :max="300" />
        </el-form-item>
        <el-form-item v-if="propForm.dataType === 'B'" label="最小值" prop="minNum">
          <el-input-number v-model="propForm.ext.minNum" :min="0" :max="300" />
        </el-form-item>
        <el-form-item label="默认值类型" prop="defaultType">
          <el-select v-model="propForm.ext.defaultType">
            <el-option v-for="dict in ux.DEFAULT_TYPE" :key="dict.value" :label="dict.label" :value="dict.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="默认值" prop="defaultExp">
          <el-input v-model="propForm.ext.defaultExp" placeholder="请输入表达式">
            <template #append>
              <el-button icon="Search" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="propForm.srcType === '4'" label="过滤表达式" prop="filterExp">
          <el-input v-model="propForm.ext.filterExp" placeholder="请输入表达式">
            <template #append>
              <el-button icon="Search" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="全文检索">
          <el-switch v-model="propForm.swt.fullSw" :active-value="SwitchEnum.OPEN" :inactive-value="SwitchEnum.CLOSE" />
        </el-form-item>
        <el-form-item label="短描述">
          <el-switch v-model="propForm.swt.shortSw" :active-value="SwitchEnum.OPEN" :inactive-value="SwitchEnum.CLOSE" />
        </el-form-item>
        <el-form-item label="长描述">
          <el-switch v-model="propForm.swt.longSw" :active-value="SwitchEnum.OPEN" :inactive-value="SwitchEnum.CLOSE" />
        </el-form-item>
        <el-form-item v-if="false" label="前缀类型" prop="prefixType">
          <el-select v-model="propForm.ext.prefixType">
            <el-option v-for="dict in ux.FIX_TYPE" :key="dict.value" :label="dict.label" :value="dict.value"/>
          </el-select>
        </el-form-item>
        <el-form-item v-if="false" label="前缀取值" prop="prefixData">
          <el-button type="text" :disabled="propForm.ext.prefixType === '0'">{{ configText }}</el-button>
        </el-form-item>
        <el-form-item v-if="false" label="后缀类型" prop="suffixType">
          <el-select v-model="propForm.ext.suffixType">
            <el-option v-for="dict in ux.FIX_TYPE" :key="dict.value" :label="dict.label" :value="dict.value"/>
          </el-select>
        </el-form-item>
        <el-form-item v-if="false" label="后缀取值" prop="suffixData">
          <el-button type="text" :disabled="propForm.ext.suffixType === '0'">{{ configText }}</el-button>
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button v-if="editFlag == 1" type="primary" @click="handleSaveProp">确定</el-button>
      </div>
    </template>

    <SelectDataWin ref="dialogSelectData" v-model="propForm.ext.selectData" @change="handleSaveProp" />
  </el-dialog>
</template>

<script>
import { defineComponent, getCurrentInstance, reactive, ref, toRefs } from 'vue';
import { updateProp, getProp } from '@/api/module/prop';
import { SrcTypeEnum } from '@/store/enums/SrcTypeEnum';
import { SwitchEnum } from '@/store/enums/SwitchEnum';
import SelectDataWin from '@/views/module/prop/selectDataWin.vue';
import ux from './data';


export default defineComponent({
  name: 'PropEdit',
  emits: ['reload'],
  components: { SelectDataWin },
  setup(props, { emit }) {
    const { proxy } = getCurrentInstance();
    const {
      prop_source_type,
      prop_data_type,
      prop_view_type,
    } = proxy.useDict('prop_source_type', 'prop_data_type', 'prop_view_type');

    const vueData = reactive({
      visible: false,
      editFlag: 0, // 1可编辑 0只读
      propForm: ref(ux.initPropData()),
      propRules: {
        code: [
          { required: true, message: '属性编码不能为空', trigger: 'blur' },
          { min: 2, max: 50, message: '属性编码长度必须介于 2 和 50 之间', trigger: 'blur' },
          { pattern: /^\w{3,20}$/, message: '只能输入字母和数字' },
        ],
        name: [{ required: true, message: '属性名称不能为空', trigger: 'blur' }],
      },
      viewTypeOptions: [],
      srcTypeOptions: [],
      simpleModelList: [],
      dictTypeList: [],
      configText: '配置',
    });

    function show(one, editFlag) {
      vueData.editFlag = editFlag;
      if (editFlag == 0) {
        vueData.configText = '查看';
      }
      getProp(one.uid).then(res => {
        Object.assign(vueData.propForm, ux.initPropData());
        Object.assign(vueData.propForm, res.data);
        // 加载下拉框选项
        loadViewTypeOptions(vueData.propForm);
        loadSrcTypeOptions(vueData.propForm);
        loadSimpleModelList(vueData.propForm);
        loadDictTypeList(vueData.propForm);
        vueData.visible = true;
      });
    }

    function handleSaveProp() {
      proxy.$refs["editFormRef"].validate(valid => {
        if (valid) {
          updateProp(vueData.propForm).then(() => {
            proxy.$modal.msgSuccess("更新成功");
            vueData.visible = false;
            emit('reload');
          });
        }
      });
    }

    function handleDataTypeChange() {
      loadViewTypeOptions(vueData.propForm);
    }

    function handleViewTypeChange() {
      loadSrcTypeOptions(vueData.propForm);
    }

    function handleSrcTypeChange() {
      let propInfo = vueData.propForm;
      if (propInfo.srcType !== SrcTypeEnum.CUSTOM) { // 非自定义
        propInfo.selectData = null;
      }
      if (propInfo.srcType !== SrcTypeEnum.DICT && propInfo.srcType !== SrcTypeEnum.LINK) {
        propInfo.linkCode = null;
      }
      if (propInfo.srcType !== SrcTypeEnum.LINK) { // 非引用模型
        propInfo.linkProp = null;
        propInfo.linkData = null;
      }
      if (propInfo.srcType === SrcTypeEnum.LINK) { // 引用模型
        loadSimpleModelList(propInfo);
      } else if (propInfo.srcType === SrcTypeEnum.DICT) { // 数据字典
        loadDictTypeList(propInfo);
      }
    }

    function loadSimpleModelList(propInfo) {
      if (propInfo.srcType === SrcTypeEnum.LINK) { // 引用模型
        vueData.simpleModelList = [];
      }
    }

    function loadDictTypeList(propInfo) {
      if (propInfo.srcType === SrcTypeEnum.DICT) { // 数据字典
        vueData.dictTypeList = [];
      }
    }

    // 只读X 字符A 数值B 日期C 文件D 选组E
    function loadViewTypeOptions(propInfo) {
      let preArr = ['X'];
      if (propInfo.dataType === 'A') {
        preArr.push('A', 'E');
      } else {
        preArr.push(propInfo.dataType);
      }
      vueData.viewTypeOptions = prop_view_type.value
        .filter(dict => preArr.indexOf(dict.value.substr(0,1)) > -1);
    }

    function loadSrcTypeOptions(propInfo) {
      let supportArr = [SrcTypeEnum.NONE];
      if (propInfo.viewType === 'X1') { // 只读
        supportArr.push(SrcTypeEnum.RULE); // 编码规则
      } else if (propInfo.viewType === 'X2') { // 隐藏
        vueData.propForm.srcType = SrcTypeEnum.NONE;
      } else if (propInfo.viewType === 'A1' || propInfo.viewType === 'A4') { // 键盘输入
        supportArr.push(SrcTypeEnum.INPUT); // 手动输入
      } else if (propInfo.viewType.indexOf("A") === 0) { // 下拉、弹窗
        supportArr.push(SrcTypeEnum.CUSTOM, SrcTypeEnum.DICT, SrcTypeEnum.LINK); // 自定义selectData、数据字典、引用模型
      } else if (propInfo.viewType.indexOf("E") === 0) { // 下拉、弹窗
        supportArr.push(SrcTypeEnum.CUSTOM, SrcTypeEnum.DICT); // 自定义selectData、数据字典
      } else {
        supportArr.push(SrcTypeEnum.INPUT);
      }
      vueData.srcTypeOptions = prop_source_type.value
        .filter(dict => supportArr.indexOf(dict.value) > -1);
    }

    function handleLinkCodeChange() {

    }

    function handleQuickSwChange() {
      if (vueData.propForm.quickSw == SwitchEnum.OPEN) {
        vueData.propForm.advanceSw = SwitchEnum.OPEN;
      }
    }

    function handleSelectData() {
      proxy.$refs['dialogSelectData'].show(vueData.propForm, vueData.editFlag);
    }

    return {
      SwitchEnum,
      SrcTypeEnum,
      prop_data_type,
      ux,
      ...toRefs(vueData),
      handleSaveProp,
      handleDataTypeChange,
      handleViewTypeChange,
      handleSrcTypeChange,
      handleLinkCodeChange,
      handleQuickSwChange,
      handleSelectData,
      show,
    };
  }
});
</script>

<style scoped>
div.el-input--default {
  width: 212px;
}
</style>